<template>
	<div class="app-settings">
		<div class="check-hidden-range">
			<p>卡片正面随机范围</p>
			<el-checkbox-group v-model="checkList" @change="changeCheckList">
				<el-checkbox label="平假名" />
				<el-checkbox label="片假名" />
				<el-checkbox label="罗马字" />
			</el-checkbox-group>
		</div>
		<el-divider />
		<div class="select-cards">
			<p>选取加入卡组范围</p>
			<div style="margin: 20px 0px;">
				<el-button @click="selectTargetRows(0)">あ行</el-button>
				<el-button @click="selectTargetRows(1)">か行</el-button>
				<el-button @click="selectTargetRows(2)">さ行</el-button>
				<el-button @click="selectTargetRows(3)">た行</el-button>
				<el-button @click="selectTargetRows(4)">な行</el-button>
				<el-button @click="selectTargetRows(5)">は行</el-button>
				<el-button @click="selectTargetRows(6)">ま行</el-button>
				<el-button @click="selectTargetRows(7)">や行</el-button>
				<el-button @click="selectTargetRows(8)">ら行</el-button>
				<el-button @click="selectTargetRows(9)">わ行</el-button>
				<el-button @click="selectTargetRows(10)">ん行</el-button>
				<el-button @click="selectRangeRows(0, 5)">前 5 行</el-button>
				<el-button @click="selectRangeRows(5, 11)">后 5 行</el-button>
				<el-button @click="selectAllRows">全选</el-button>
				<el-button @click="selectRows([])">清空</el-button>
			</div>
			<el-table
				border
				ref="multipleTableRef"
				:data="validKana"
				style="width: 100%;"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="49" align="center" />
				<el-table-column align="center" property="hiragana" label="平假名" />
				<el-table-column align="center" property="katakana" label="片假名" />
				<el-table-column align="center" property="romanji" label="罗马字" />
			</el-table>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref, UnwrapRef } from "vue";
import { ElTable } from "element-plus";
import { useStore } from "../store/app";

const {
	allowRange,
	setAllowRange,
	kana,
	kanaIndexRange,
	setKanaAllowIndex,
} = useStore();

const checkList = ref(allowRange);
const multipleTableRef = ref<InstanceType<typeof ElTable>>();

const defaultAllRows = kana.filter((e) => e.isValid()).map((e) => e.value());
const validKana = ref(defaultAllRows);
const selectedKanaList = ref(
	validKana.value.filter((e) => kanaIndexRange.includes(e.index))
);

onMounted(() => {
	selectedKanaList.value.forEach((row) => {
		multipleTableRef.value!.toggleRowSelection(row, true);
	});
});

type KanaItem = UnwrapRef<typeof validKana>;

function changeCheckList(val: string[]) {
	setAllowRange(val);
}

function selectRows(rows: KanaItem) {
	if (rows.length > 0) {
		rows.forEach((row) => {
			multipleTableRef.value!.toggleRowSelection(row, true);
		});
	} else {
		multipleTableRef.value!.clearSelection();
	}
}

function selectAllRows() {
	selectRows(defaultAllRows);
}

function selectTargetRows(rowIndex: number) {
	selectRows(defaultAllRows.filter((e) => e.row === rowIndex));
}

function selectRangeRows(from: number, end: number) {
	for (let i = from; i < end; i++) {
		selectTargetRows(i);
	}
}

const handleSelectionChange = (rows?: KanaItem) => {
	if (Array.isArray(rows)) {
		selectedKanaList.value = rows;
	}

	const list = selectedKanaList.value.map((e) => e.index);
	setKanaAllowIndex(list);
};
</script>

<style lang="less">
.app-settings {
	.check-hidden-range {
		.el-checkbox-group {
			margin-left: 12px;
		}
	}

	.select-cards {
		& > div {
			.el-button {
				margin: 4px;
			}
		}
	}

	div.el-table__header-wrapper div.cell,
	div.el-table__body-wrapper div.cell {
		transform: translateX(3px);
	}
}
</style>
